<template>
    <div class="page">
        <gzg-search :config="searchConfig" 
                    :form="searchForm"
                    :show-more="false"
                    :label-width="120"
                    @search="search"></gzg-search>
        <div class="tool-wrap">    
            <el-button class="btn" :icon="Plus" type="primary" @click="openDialog">新增</el-button>
        </div>
        <div class="grid-wrap">
            <el-table style="width:100%;"
                              height="100%"
                              :border="true"
                              :data="listData.data">
                <el-table-column label="商品id" prop="id" width="80px" ></el-table-column>
                <el-table-column label="商家名称" prop="company_name" min-width="150px"></el-table-column>
                <el-table-column label="商品名称"  prop="product_name" min-width="150px"></el-table-column>
                <el-table-column label="商家默认价格" prop="price" width="120px"></el-table-column>
                <el-table-column label="支持支付方式" prop="payment_type_text" width="200px"></el-table-column>
                <!-- <el-table-column label="区域渠道"  prop="agent_partner_name" width="150px"></el-table-column> -->
                <!-- <el-table-column label="服务商"  prop="agent_service_name" width="150px"></el-table-column> -->
                <el-table-column label="更新时间" prop="update_at" width="200px"></el-table-column>
                <el-table-column label="操作" width="100px" fixed="right">
                    <template #default="props">
                        <div>
                            <el-button type="primary" @click="edit(props.row)" v-if="props.row.button.edit_btn" link>编辑</el-button>

                        </div>
                    </template>
                </el-table-column>
                
            </el-table>
        </div>
        <div class="page-wrap">
            <el-pagination
                v-model:current-page="params.page"
                v-model:page-size="params.page_size"
                :page-sizes="[100, 200, 300, 400]"
                layout="total, prev, pager, next"
                :total="listData.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <view-dialog :dialogVisible="show" 
                     :companylist="searchConfig[0].list"
                     :id="id" 
                     :state="state" 
                     @success="refresh"
                     @close="show = false"></view-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from 'vue'
import { getCompanyList } from 'services/common'

import { getProductList } from 'services/product'

import { assign } from 'lodash'

import viewDialog from './component/view-dialog/index'

const show = ref(false)
const id = ref()
const state = ref('add')

const searchForm = reactive({
    company_name:'',
    product_name:'',
    service_id:'',
})

const searchConfig = reactive([{
    id:'company_name',
    label:'商家名称',
    placeholder:'请选择商家',
    type:'select',
    list:[],
    key:'id',
    text:'company_name',
    filter:true
},{
    id:'product_name',
    label:'商品名称',
    placeholder:'请输入商品名称',
    type:'input'
}])

const listData = reactive({
    total:0,
    data:<any>[]
})

const params = ref({
    company_name:'',
    seller_status:'',
    page_size:  20,
    page:  1,
})

const search = (searchParams:any) => {

    assign(params.value, searchParams)

    params.value.page = 1

    getList()
}

const handleSizeChange = (val: number) => {
    params.value.page_size = val
    params.value.page = 1
    getList();
}

const handleCurrentChange = (val:number) => {
    params.value.page = val
    getList()
} 

const refresh = () => {
    params.value.page = 1
    show.value = false
    getList()
}

const getList = () => {
    getProductList(params.value).then(res => {
      
        listData.total = parseInt(res.total_rows)
        listData.data = res.items || []
    })
}

const openDialog = () => {
    show.value = true
    state.value = 'add'
    id.value =''
}

const edit = (row:any) => {
    id.value = row.id
    show.value = true
    state.value = 'edit'
}


const initData = () => {
    getCompanyList().then(res => {
        searchConfig[0].list = res.items

    })
}

onMounted(() => {
    getList()
    initData()
})
</script>
